<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="tools/jquery-1.12.2.min.js"></script>
		<script src="tools/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			body {
				perspective: 1000px;
			}
			
			.contain {
				width: 300px;
				height: 200px;
				margin: 200px auto;
				position: relative;
				transform-style: preserve-3d;
				transition: all 8s;
			}
			
			.contain:hover {
				animation: circle 8s ease-in-out infinite;
			}
			.contain>div{
				position: absolute;
			}
			
			.item {
				width: 100%;
				height: 100%;
				position: relative;
				transform-style: preserve-3d;
			}
			
			.item::before {
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				/*background: linear-gradient(to bottom, white, gray);*/
				/*-webkit-box-reflect: below;*/
				transform: rotateX(-90deg) skewX(-20deg);
				transform-origin: bottom center;
				background-image: inherit;
				opacity: 0.2;
				box-shadow: 2px 2px 20px#000;
			}
			
			.item:nth-child(1) {
				background: url('images/2-small.jpg') no-repeat center/cover;
				transform: rotateY(0deg) translateZ(300px);
			}
			
			.item:nth-child(2) {
				background: url('images/1-small.jpg') no-repeat center/cover;
				transform: rotateY(60deg) translateZ(300px);
			}
			
			.item:nth-child(3) {
				background: url('images/3-small.jpg') no-repeat center/cover;
				transform: rotateY(120deg) translateZ(300px);
			}
			
			.item:nth-child(4) {
				background: url('images/4-small.jpg') no-repeat center/cover;
				transform: rotateY(180deg) translateZ(300px);
			}
			
			.item:nth-child(5) {
				background: url('images/5-small.jpg') no-repeat center/cover;
				;
				transform: rotateY(240deg) translateZ(300px);
			}
			
			.item:nth-child(6) {
				background: url('images/1-small.jpg') no-repeat center/cover;
				transform: rotateY(300deg) translateZ(300px);
			}
			
			@keyframes circle {
				from {}
				to {
					transform: rotateY(360deg);
				}
			}
		</style>
	</head>

	<body>
		<div class="contain">
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
	</body>

</html>